<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="隐藏">
<input type="button" value="显示">
<input type="button" value="淡出">
<input type="button" value="淡入">
<input type="button" value="上滑">
<input type="button" value="下滑">
<input type="button" value="自定义">
<hr>
<img src="../a.jpg" style="width: 100px" alt="">
<script src="jquery.min.js"></script>
<script>
  $("input:eq(0)").click(function () {
    $("img").hide(2000,function () {
      $("img").show(1000)
    });
  })
  $("input:eq(1)").click(function () {
    $("img").show(2000);
  })
  $("input:eq(2)").click(function () {
    $("img").fadeOut(2000);
  })
  $("input:eq(3)").click(function () {
    $("img").fadeIn(2000);
  })
  $("input:eq(4)").click(function () {
    $("img").slideUp(2000);
  })
  $("input:eq(5)").click(function () {
    $("img").slideDown(2000);
  })
//自定义
  $("input:eq(6)").click(function () {
      $("img").css("position","relative")
      // 做动画
      $("img").animate({"left":"200px"},1000);
      $("img").animate({"top":"200px"},1000);
      $("img").animate({"left":"0px"},1000);
      $("img").animate({"top":"0px"},1000);
      $("img").animate({"width":"200px"},1000);
      $("img").animate({"width":"100px"},1000);

  })
</script>
</body>
</html>